<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
		<style type="text/css">			
			html{
				height: 100%;
			}
			/* body占父容器html */
			body{
				height: 100%;
			}
			/* div占父容器body */
			#page1{				
				/* 背景图默认横向和纵向都平铺 */
				height: 100%;
				background-image:url(img/halloween1.jpg) ;
				/* 横纵向都不重复 */
				background-repeat: no-repeat;
				/* 设置背景大小 */
				background-size: 100% 100%;				
			}
			#page2{
				position: relative;
				/* 背景图默认横向和纵向都平铺 */
				height: 100%;
				background-image: url(img/halloween2.jpg);
				/* 横纵向都不重复 */
				background-repeat: no-repeat;
				/* 设置背景大小 */
				background-size: 100% 100%;
				/* 隐藏属性 */
				display : none;				
			}
			#page3{
				position: relative;
				/* 背景图默认横向和纵向都平铺 */
				height: 100%;
				background-image: url(img/halloweenMain3.jpg);
				/* 横纵向都不重复 */
				background-repeat: no-repeat;
				/* 设置背景大小 */
				background-size: 100% 100%;
				/* 隐藏属性 */
				display : none;				
			}
			#page4{
				/* position: relative; */
				/* 背景图默认横向和纵向都平铺 */
				height: 100%;
				/* background-image: url(img/charm1.jpg); */
				/* 横纵向都不重复 */
				background-repeat: no-repeat;
				/* 设置背景大小 */
				background-size: 100% 100%;
				/* 隐藏属性 */
				/* display : none; */
				display : none;
			}
			#page5{
				/* position: relative; */
				/* 背景图默认横向和纵向都平铺 */
				height: 100%;
				/* background-image: url(img/charm2.jpg); */
				/* 横纵向都不重复 */
				background-repeat: no-repeat;
				/* 设置背景大小 */
				background-size: 100% 100%;
				/* 隐藏属性 */
				/* display : none; */
				display : none;
			}
			#page6{
				/* position: relative; */
				/* 背景图默认横向和纵向都平铺 */
				height: 100%;
				/* background-image: url(img/charm3.jpg); */
				/* 横纵向都不重复 */
				background-repeat: no-repeat;
				/* 设置背景大小 */
				background-size: 100% 100%;
				/* 隐藏属性 */
				/* display : none; */
				display : none;
			}
			#page7{
				/* position: relative; */
				/* 背景图默认横向和纵向都平铺 */
				height: 100%;
				/* background-image: url(img/charm4.jpg); */
				/* 横纵向都不重复 */
				background-repeat: no-repeat;
				/* 设置背景大小 */
				background-size: 100% 100%;
				/* 隐藏属性 */
				/* display : none; */
				display : none;
			}
			#page8{
				/* position: relative; */
				/* 背景图默认横向和纵向都平铺 */
				height: 100%;
				/* background-image: url(img/charm5.jpg); */
				/* 横纵向都不重复 */
				background-repeat: no-repeat;
				/* 设置背景大小 */
				background-size: 100% 100%;
				/* 隐藏属性 */
				/* display : none; */
				display : none;
			}
			#page9{
				/* position: relative; */
				/* 背景图默认横向和纵向都平铺 */
				height: 100%;
				/* background-image: url(img/charm6.jpg); */
				/* 横纵向都不重复 */
				background-repeat: no-repeat;
				/* 设置背景大小 */
				background-size: 100% 100%;
				/* 隐藏属性 */
				/* display : none; */
				display : none;
			}
			#page10{
				/* position: relative; */
				/* 背景图默认横向和纵向都平铺 */
				height: 100%;
				/* background-image: url(img/charm7.jpg); */
				/* 横纵向都不重复 */
				background-repeat: no-repeat;
				/* 设置背景大小 */
				background-size: 100% 100%;
				/* 隐藏属性 */
				/* display : none; */
				display : none;
			}			
			/* id选择器 选择在页面内id唯一的元素  #id选择器 */
			/* 类选择器 
			用法 .类名 */
			#box{
				/* 绝对定位 距离父容器左右上下 */
				position: absolute;
				left: 260px;
				bottom: 200px;
				animation: boxframe 1s infinite;
				/* infinite 一直动 */
			}
			@keyframes boxframe{
				from{
					left: 260px;
				}
				to{
					left: 360px;
				}
			}			
			#title{
				position: absolute;
				left: 289px;
				top: 200px;
				/* 动画属性 */
				animation: titleframe 5s;
			}
			/* 关键帧 */
			@keyframes titleframe{
				from{
					/* 开始 */
					                opacity: 0;/* 透明度0-1 */
				}
				to{
					/* 结束 */
					opacity: 1;
				}
			}
			#pumpkin
			     {
			     	position: absolute;
			     	left:280px;
			     	top:50px;
			     }			
			#startGame
			     {
			     	position: absolute;
			     	left:380px;
			     	bottom:250px;
			     }
			#i1{
				/* 固定定位 */
				position: relative;
				left: 50px;
				top: 100px;
				animation: i1frame 2s infinite;
			}
			@keyframes i1frame{
				33%{
					left: 50px;
					top: 300px;
				}
				66%{
					left: 150px;
					top: 200px;
				}
				100%{
					left: 50px;
					top: 100px;
				}
			}			
			#i2{
				position: relative;
				left: 250px;
				top: 400px;
				animation: i2frame 3s infinite;
			}
			@keyframes i2frame{
				33%{
					left: 300px;
					top: 430px;
				}
				66%{
					left: 350px;
					top: 4 30px;
				}
				100%{
					left: 250px;
					top: 400px;
				}
			}
			#i3{
				position: absolute;
				left: 50px;
				top: 650px;
				animation: i3frame 3s infinite;
			}
			@keyframes i3frame{
				/* 改变宽度 高度随比例缩放 */
				from{
					left: 50px;
					top: 650px;
				}
				to{
					left: 150px;
					top: 500px;
				}
			}
			#i4{
				position: absolute;
				left: 500px;
				top: 50px;
				animation: i4frame 3s infinite;
			}
			@keyframes i4frame{
				33%{
					left: 600px;
					top: 150px;
				}
				
				100%{
					left: 600px;
					top: 400px;
				}
			}
			#i5{
				position: absolute;
				left: 200px;
				top: 900px;
				animation: i5frame 2s infinite;
			}
			@keyframes i5frame{
				/* 改变宽度 高度随比例缩放 */
				from{
					left: 200px;
					top: 900px;
				}
				to{
					left: 200px;
					top: 990px;
				}
			}
			#i6{
				position: absolute;
				left: 300px;
				top: 800px;
				animation: i6frame 4s infinite;
			}
			@keyframes i6frame{
				/* 改变宽度 高度随比例缩放 */
				from{
					left: 70px;
					top: 800px;
				}
				to{
					left: 105px;
					top: 1200px;
				}
			}
			#i7{
				position: absolute;
				right: 50px;
				bottom: 300px;
				animation: i7frame 2s infinite;
			}
			@keyframes i7frame{
				/* 改变宽度 高度随比例缩放 */
				from{
					width: 142px;
				}
				to{
					width: 20px;
				}
			}			
			#c1,#c2,#c3,#c4,#c5,#c6,#c7{
				width: 100%;
				height: 100%;
			}		
			
			*{
			    cursor:url(0.png/images/shubiao.ico),auto;
			}
		</style>
	
	
		
		<script type="text/javascript">
			function showpage(num) {
				/* page+num这一页显示 */
				/* var idstr = "page"+num;
				alert(idstr); */
			    document.getElementById("page1").style.display="none";
			    document.getElementById("page2").style.display="none";
			    document.getElementById("page3").style.display="none";
			    document.getElementById("page4").style.display="none";
				document.getElementById("page5").style.display="none";
				document.getElementById("page6").style.display="none";
				document.getElementById("page7").style.display="none";
				document.getElementById("page8").style.display="none";
				document.getElementById("page9").style.display="none";
				document.getElementById("page10").style.display="none";
			         if(num==1) {
			         document.getElementById("page1").style.display="block";        
			         }
			         else if(num==2){
			         document.getElementById("page2").style.display="block";        
			         }
			         else if(num==3) {
			         document.getElementById("page3").style.display="block";        
			         }
			         else if(num==4) {
			         document.getElementById("page4").style.display="block";        
			         }
					 else if(num==5) {
					 document.getElementById("page5").style.display="block";        
					 }
					 else if(num==6) {
					 document.getElementById("page6").style.display="block";        
					 }
					 else if(num==7) {
					 document.getElementById("page7").style.display="block";        
					 }
					 else if(num==8) {
					 document.getElementById("page8").style.display="block";        
					 }
					 else if(num==9) {
					 document.getElementById("page9").style.display="block";        
					 }
					 else if(num==10) {
					 document.getElementById("page10").style.display="block";        
					 }
			         }
             function showcharm(num)
                        {
                        	showpage(num+3);
                        }
		</script>
		
	</head>
	<body>
		<div id="page1">
			<img id="title" src="img/title.png" >
			<img id="box" src="img/box.png" onclick="showpage(2)" >
			
		</div>
		
		<div id="page2">
			<img id="pumpkin" src="img/pumpkin.png" >
			<img id="startGame" src="img/startGame.jpg" onclick="showpage(3)" >
			
		</div>
		
		<div id="page3">
			<img id="i1" src="img/1.png" onclick="showcharm(1)" >
			<img id="i2" src="img/2.png" onclick="showcharm(2)" >
			<img id="i3" src="img/3.png" onclick="showcharm(3)" >
			<img id="i4" src="img/4.png" onclick="showcharm(4)" >
			<img id="i5" src="img/5.png" onclick="showcharm(5)" >
			<img id="i6" src="img/6.png" onclick="showcharm(6)" >
			<img id="i7" src="img/7.png" onclick="showcharm(7)" >
			
			
		</div>
		
		<div id="page4">
			<img id="c1" src="img/charm1.jpg" onclick="showpage(3)" >		
		</div>	
	<div id="page5">
		<img id="c2" src="img/charm2.jpg" onclick="showpage(3)" >		
	</div>
	<div id="page6">
		<img id="c3" src="img/charm3.jpg" onclick="showpage(3)" >		
	</div>
	<div id="page7">
		<img id="c4" src="img/charm4.jpg" onclick="showpage(3)" >		
	</div>
	<div id="page8">
		<img id="c5" src="img/charm5.jpg" onclick="showpage(3)" >		
	</div>
	<div id="page9">
		<img id="c6" src="img/charm6.jpg" onclick="showpage(3)" >		
	</div>
	<div id="page10">
		<img id="c7" src="img/charm7.jpg" onclick="showpage(3)" >		
	</div>
		
	</body>
</html>
